<template>
  <div>
    <h2>操作说明</h2>
    <ul>
      <li>
        <span>在左侧打开 <el-link class="btn-demo">连接</el-link> 后，才能执行 SQL 语句</span>
      </li>
      <li>
        <span>在数据库信息中，双击表/视图名称可以查看表数据</span>
      </li>
      <li>
        <span>如果选中了部分代码，则在执行时，只会执行选中部分</span>
      </li>
      <li>
        <span>如果选中了部分代码，则在格式化时，只会格式化选中部分</span>
      </li>
      <li>
        <span>同时按下 Shift 和 Alt 键，再按下鼠标左键拖动可以进行列选择</span>
      </li>
    </ul>
    <h2>快捷键</h2>
    <ul>
      <li>
        <span>快捷键</span>
        <span class="hotkey-text">Alt-Enter</span>
        <span>执行代码</span>
      </li>
      <!-- <li>
        <span>快捷键</span>
        <span class="hotkey-text">Ctrl</span>
        <span>智能提示</span>
      </li> -->
      <li>
        <span>快捷键</span>
        <span class="hotkey-text">Ctrl-Z</span>
        <span>撤消</span>
      </li>
      <li>
        <span>快捷键</span>
        <span class="hotkey-text">Ctrl-Y</span>
        <span>重做</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelpPanel'
}
</script>

<style scoped>
.hotkey-text {
  color: deeppink;
  padding: 1px 5px;
  font-family: Consolas, Arial, serif;
}

.btn-demo {
  width: 40px;
  height: 24px;
  min-height: 0;
  line-height: 20px;
  padding: 0;
}
</style>
